<template>
        <el-card shadow="never" style="max-height: 700px; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>

                <el-form-item label="分类" prop="category">
                <SelectPage v-model="form.category" :url="'/admin/productcate/selectPage'" show_field="title" placeholder="请选择分类" query_field="title" :multiple="false" />
                </el-form-item>

                <el-form-item label="产品库类型:" prop="flag">
                  <el-select v-model="form.flag" multiple placeholder="请选择" clearable>
                    <el-option v-for="(item, index) in flag" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>

                <el-form-item label="中文名称:" prop="chinese_name">
                    <el-input v-model="form.chinese_name" placeholder="请输入中文名称" clearable />
                </el-form-item>
                <el-form-item label="运输方式:" prop="transport">
                    <el-input v-model="form.transport" placeholder="请输入运输方式" clearable />
                </el-form-item>
                <el-form-item label="体积:" prop="volume">
                    <el-input v-model="form.volume" placeholder="请输入体积" clearable />
                </el-form-item>
                <el-form-item label="投放开发人员:" prop="dev_admin">
                    <SelectPage v-model="form.dev_admin" :url="'/admin/system.admin/selectPage'" show_field="nickname" query_field="nickname" :multiple="false" />
                </el-form-item>

                 <el-form-item label="上架时间:" prop="xp_time">
                    <el-date-picker
                        v-model="form.xp_time"
                        type="date"
                        placeholder="选择上架时间">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="爆品时间:" prop="bp_time">
                    <el-date-picker
                        v-model="form.bp_time"
                        type="date"
                        placeholder="选择爆品时间">
                    </el-date-picker>
                </el-form-item> 
                 
                <el-form-item label="新产品编号:" prop="brand">
                    <el-input v-model="form.brand"  :disabled="true" placeholder="请输入新产品编号" clearable />
                </el-form-item>

                <el-form-item label="图片:" prop="images">
                    <ImageUpload v-model="form.images" :limit="5"/>
                </el-form-item> 
      
                <el-form-item label="修改前sku样式:" prop="before_sku">
                    <el-input v-model="form.before_sku" placeholder="请输入修改前sku样式" clearable />
                </el-form-item>
                <el-form-item label="标准格式:" prop="standard_sku">
                    <el-input v-model="form.standard_sku" placeholder="请输入标准格式" clearable />
                </el-form-item>
                <el-form-item label="供应商尺码范围:" prop="supplier_size">
                    <el-input v-model="form.supplier_size" placeholder="请输入供应商尺码范围" clearable />
                </el-form-item>
                <el-form-item label="售卖页对应尺码:" prop="saleimage">
                    <ImageUpload v-model="form.saleimage" />
                </el-form-item>          
                <el-form-item label="该系列产品包含颜色:" prop="include_color">
                    <el-input v-model="form.include_color" placeholder="请输入该系列产品包含颜色" clearable />
                </el-form-item>
                <el-form-item label="供应商:" prop="supplier">
                    <el-input v-model="form.supplier" placeholder="请输入供应商" clearable />
                </el-form-item>
                <el-form-item label="店铺:" prop="site_name">
                    <el-input v-model="form.site_name" placeholder="请输入店铺" clearable />
                </el-form-item>
                <el-form-item label="是否在投:" prop="is_release">
                    <el-input v-model="form.is_release" placeholder="请输入是否在投" clearable />
                </el-form-item>
                <el-form-item label="运营:" prop="operation">
                    <el-input v-model="form.operation" placeholder="请输入运营" clearable />
                </el-form-item>
                <el-form-item label="参考链接:" prop="link">
                    <el-input v-model="form.link" placeholder="请输入参考链接" clearable />
                </el-form-item>
                <el-form-item label="采购价(元):" prop="purchase_price">
                    <el-input v-model="form.purchase_price" placeholder="请输入采购价(元)" clearable />
                </el-form-item>
                <el-form-item label="包裹重量(kg):" prop="product_weight">
                    <el-input v-model="form.product_weight" placeholder="请输入包裹重量(kg)" clearable />
                </el-form-item>
                <el-form-item label="实际采购链接:" prop="purchase_link">
                    <el-input v-model="form.purchase_link" placeholder="请输入实际采购链接" clearable />
                </el-form-item>
                <el-form-item label="时间:" prop="time">
                    <el-date-picker v-model="form.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" />
                </el-form-item>   
                
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
        
            },
            flag: [
                { label: '独立站', value: 1 },
                { label: 'tiktok', value: 2 },
             ],
            form: {  },
          

        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.form.bp_time = Date.parse(this.form.bp_time);
                    this.form.xp_time = Date.parse(this.form.xp_time);
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
